<template>
	<view class="body">
		<view class="header">
			<u-navbar title-color="#000000" back-icon-color="#000000" :background="background" title="团队中心"></u-navbar>
			<view class="flex">
				<u-image shape="circle" width="76rpx" height="76rpx" :src="obj.saas_user.avatar"></u-image>
				<view class="right">
					<view class="name">
						{{obj.saas_user.name}}
					</view>
					<view class="agent">
						{{obj.team_bonus_leader_level_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="withdrawable">
				可提现佣金(元)
			</view>
			<view class="flex_sbw">
				<view class="money">
					￥{{obj.user.price}}
				</view>
				<view class="btn" @click="goWithdrawal(10)">
					账户提现
				</view>
			</view>
			<view class="flex">
				<view class="left" @click="goNotYet(2)">
					<view class="Yet">
						未到账佣金(元)
					</view>
					<view class="money">
						￥{{obj.sumUnSend}}
					</view>
					<view class="goLook">
						<view class="mr10">
							去查看
						</view>
						<u-icon color="#8C8C8C" size="20" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="left" @click="goYotYet(3)">
					<view class="Yet">
						已提现佣金(元)
					</view>
					<view class="money">
						￥{{obj.sumCash}}
					</view>
					<view class="goLook">
						<view class="mr10">
							去查看
						</view>
						<u-icon color="#8C8C8C" size="20" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="cumulative" @click="goCumulativeDistribution">
				<view class="money">
					累计分销佣金 ¥{{obj.user.total_price}}
				</view>
				<u-icon color="#8C8C8C" size="20" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="footer">
			<view class="flex">
				<view class="ml20" v-if="list.includes(11)" @click="goEducationAwardOrder(11)">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.range"></u-image>
					</view>
					<view class="text">
						业绩奖订单
					</view>
				</view>
				<view class="ml20" v-if="list.includes(13)" @click="goEducationAwardOrder(13)">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.educatingPeople"></u-image>
					</view>
					<view class="text">
						育人奖订单
					</view>
				</view>
				<view class="ml20" v-if="list.includes(14)" @click="goCommissionDetails(14)">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.cultivation"></u-image>
					</view>
					<view class="text">
						感恩奖
					</view>
				</view>
				<view class="ml20" v-if="list.includes(12)" @click="goEducationAwardOrder(12)">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.flatLevel"></u-image>
					</view>
					<view class="text">
						培训津贴
					</view>
				</view>
				<view class="ml20" @click="goMyTeam">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.myContent"></u-image>
					</view>
					<view class="text">
						我的团队
					</view>
				</view>
				<view class="ml20" @click="goWithdrawal()">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.withdrawal"></u-image>
					</view>
					<view class="text">
						账户提现
					</view>
				</view>
				<view class="ml20" @click="goCommissionDetails(0)">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.detailed"></u-image>
					</view>
					<view class="text">
						佣金明细
					</view>
				</view>
				<view class="ml20" @click="goWithdrawalDetails">
					<view class="dfc">
						<u-image class="img" width="60rpx" height="60rpx" :src="asyncImgs.team_bonus.commission"></u-image>
					</view>
					<view class="text">
						提现明细
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#F5EBEE',
				},
				obj: {},
				list:[]
			}
		},
		onLoad() {
			this.getList()
			this.getMsg()
		},
		methods: {
			async getList() {
			    try {
			        const res = await this.$allrequest.teamCenter.getConterMsg();
			        if (res.code == 0) {
			            console.log('团队中心数据', res);
			            this.obj = res.data;
			        }
			    } catch (req) {
			        // 添加一秒的定时器
			        setTimeout(() => {
			            uni.navigateBack();
			        }, 1000); // 1000 毫秒 = 1 秒
			    }
			},
			async getMsg() {
			    try {
			        const res = await this.$allrequest.teamCenter.getMsg();
			        if (res.code == 0) {
			            console.log('权限接口', res);
			            this.list = res.data.conf.mobile_menu_types;
			        }
			    } catch (req) {
			        // 添加一秒的定时器
			        setTimeout(() => {
			            uni.navigateBack();
			        }, 1000); // 1000 毫秒 = 1 秒
			    }
			},
			// 提现
			goWithdrawal() {
				uni.navigateTo({
					url: `/teamCenter/withdrawal/withdrawal`
				})
			},
			// 未到账佣金
			goNotYet(current) {
				uni.navigateTo({
					url: `/teamCenter/commissionDetails/commissionDetails?current=${current}`
				})
			},
			// 已提现佣金
			goYotYet(current) {
				uni.navigateTo({
					url: `/teamCenter/withdrawalDetails/withdrawalDetails?current=${current}`
				})
			},
			// 累计分销佣金
			goCumulativeDistribution() {
				uni.navigateTo({
					url: `/user/share/index`
				})
			},
			// 分红订单-育人奖订单-培育奖订单
			goEducationAwardOrder(type) {
				uni.navigateTo({
					url: `/teamCenter/educationAwardOrder/educationAwardOrder?type=${type}`
				})
			},
			// 我的团队
			goMyTeam() {
				uni.navigateTo({
					url: "/teamCenter/myTeam/myTeam"
				})
			},
			// 佣金明细
			goCommissionDetails(type) {
				uni.navigateTo({
					url: `/teamCenter/commissionDetails/commissionDetails?type=${type}`
				})
			},
			// 提现明细
			goWithdrawalDetails() {
				uni.navigateTo({
					url: "/teamCenter/withdrawalDetails/withdrawalDetails"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		width: 750rpx;
		min-height: 100vh;
		background: #F2F2F2;
	}
	.ml20{
		width: 129rpx;
		margin-top: 20rpx;
	}

	.header {
		width: 100%;
		
		background: linear-gradient(180deg, #F5EBEE 66%, #F2F2F2 100%);

		.flex {
			display: flex;
			align-items: center;
			padding: 24rpx 48rpx;

			.right {
				margin-left: 20rpx;
				font-family: PingFang SC, PingFang SC;

				.name {
					font-weight: 600;
					font-size: 30rpx;
					color: #262626;
				}

				.agent {
					font-weight: 400;
					font-size: 24rpx;
					color: #8C8C8C;
				}
			}
		}
	}

	.content {
		width: 702rpx;
		background: linear-gradient(180deg, #FAF8FA 100%, #FFFFFF 10%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 0 auto;
		padding: 48rpx 40rpx 30rpx 40rpx;

		.withdrawable {
			font-weight: 500;
			font-size: 28rpx;
			color: #8C8C8C;
		}

		.flex_sbw {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.money {
				font-weight: 600;
				font-size: 60rpx;
				color: rgba(0, 0, 0, 0.85);
			}

			.btn {
				width: 192rpx;
				height: 78rpx;
				background: #F0250E;
				border-radius: 120rpx 120rpx 120rpx 120rpx;
				border: 2rpx solid #F0250E;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 76rpx;
				text-align: center;
				cursor: pointer;
			}
		}

		.flex {
			display: flex;
			align-items: center;
			margin-top: 50rpx;

			.left {
				width: 50%;

				.Yet {
					font-weight: normal;
					font-size: 24rpx;
					color: #8C8C8C;
				}

				.money {
					font-weight: 600;
					font-size: 30rpx;
					color: rgba(0, 0, 0, 0.85);
					margin-top: 10rpx;
				}

				.goLook {
					font-weight: 400;
					font-size: 24rpx;
					color: #8C8C8C;
					display: flex;
					align-items: center;
					margin-top: 10rpx;
				}
			}
		}

		.cumulative {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #F2F2F2;
			padding: 24rpx 0rpx 0rpx 0rpx;
			margin-top: 24rpx;

			.money {
				font-weight: 400;
				font-size: 24rpx;
				color: #8C8C8C;
			}
		}
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.ml40 {
		margin-left: 45rpx;
	}

	.footer {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 24rpx auto;
		padding: 20rpx 30rpx 40rpx 30rpx;

		.flex {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.img {
				display: flex;
				justify-content: center;
			}

			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #262626;
				margin-top: 6rpx;
				display: flex;
				justify-content: center;
			}
		}

		.flex1 {
			display: flex;
			margin-left: 10rpx;

			.img {
				display: flex;
				justify-content: center;
			}

			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #262626;
				margin-top: 6rpx;
			}
		}
	}
	.dfc{
		display: flex;
		justify-content: center;
	}
</style>